<template lang="">
    <div>
       <subcate  :data='catelist' :cid='course.cid' @scid='getcid'/>
       <van-field v-model="course.name" label="名称" />
       <van-field v-model="course.description" label="描述" />
       <van-field v-model="course.tname" label="讲师" />
       <van-image :src='"http://localhost:5000/static/upload/"+course.pic' width=100 height=100 v-if='course.pic !=""'/> 
       <van-button @click='picshow=true'>删除</van-button>
       <van-button @click='fileshow=true'>更换图片</van-button>
      
       <van-popup v-model="picshow" class='filebg'>
           <h1> 确定要删除吗？</h1>
           <van-button @click='delpic(course.pic)'>确定</van-button>
           <!-- <van-button @click='delpic'>取消</van-button> -->
       </van-popup>

       <van-popup v-model="fileshow" class='filebg'>
           <van-uploader :after-read='changepic'/>
        </van-popup>
    <div v-if='videos && videos.length>0'>
            <div  v-for='i in videos'>
                    <video :src='"http://localhost:5000/static/upload/"+i' controls="controls" width=300 height=200></video>
                    <van-button @click='delvideo(i)'>删除</van-button>
                    <van-button @click='updatevideo(i)'>更换视频</van-button>
             </div>
    </div>
     <div v-else>
            <!-- 上传视频<van-uploader :after-read='uploadvideo' /> -->
     </div>
      
       <br>
       <van-button @click='update'>提交</van-button>
    </div>
</template>
<script>
import subcate from './subcate'
export default {
    components:{
        'subcate':subcate,
    },
    data(){
        return{
            id:this.$route.query.id,
            course:{'name':''},
            catelist:[],
            videos:[],
            picshow:false,
            fileshow:false,
            type:1, //默认为操作的是图片,
            videoname:''
        }
    },
    methods: {
        getcourse(){
            this.axios.get('courseM?id='+this.id).then(res=>{
                this.course = res.data.course
                //把视频列表转换成json
                this.videos = JSON.parse(res.data.course['vedios'])
            })
        },
         //获取所有分类信息
         getCatelist(){
            this.axios.get('cateM').then(res=>{
                this.catelist = res.data.list
            })
        },
        getcid(id){
            this.course.cid=id
        },
        update(){
            this.axios.post('courseM',this.course).then(res=>{
                
            })
        },
        //删除图片
        delpic(name){
            if(this.type == 2){
                name = this.videoname
            }
            this.axios.delete('deleteFiles?name='+name+'&id='+this.course.id+'&type='+this.type).then(res=>{
                //回来操作，如果是图片把pic设置为'',如果是视频从列表中移除单个
                this.picshow=false
                if(this.type == 1){
                    this.course.pic=''
                }else{
                    this.getcourse()
                }
               
            })
        },
        //更换图片
        changepic(file){
            //先判断类型为图片还是视频
            if(this.type ==1){
                //判断看以前的有没有图片，如果有先删除再上传
                if(this.course.pic != ''){
                    this.delpic(this.course.pic)
                }
            }else{
                //视频
                this.delpic(this.videoname)
            }
            
            let data = new FormData()
            data.append('file',file.file)
            data.append('id',this.course.id)
            data.append('type',this.type)
            data.append('videoname',this.videoname)
            alert('**')
            this.axios.post('upload',data).then(res=>{
                  //框消失
                this.fileshow=false
                if(this.type == 1){
                     //更新course.pic
                    this.course.pic = res.data.pic
                }else{
                    this.getcourse()
                }
            })
        },
        //删除视频
        delvideo(name){
            //更新操作类型为视频
            this.type = 2
            this.picshow=true
            this.videoname = name
        },
        //更换视频
        updatevideo(name){
            this.type = 2
            this.fileshow=true
            this.videoname = name
        }
       
    },
    mounted() {
        this.getcourse()
        this.getCatelist()
    },
}
</script>
<style lang="">
.filebg{
    width: 50rem;
    height: 20rem;
    text-align: center;
    padding-top: 5rem;
}
</style>